<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>博客页面</title>
        <style>
            body{width:80%;margin:0 auto;}
            header{border-bottom:1px solid #ccc;height:60px;line-height:60px;}
            nav{height:30px;line-height:30px;margin-left:100px;}
            article{border:1px solid #ccc;border-radius:5px;}
            article header{height:30px;border:0;line-height:30px;font-size:20px;text-align:center;}
            article hr{width:80%;margin:0 auto;}
            article p{margin:20px;}
            footer{text-align:center;}
            section{border-top:1px solid #ccc;}
            section article{border:0;}
            #title{font-size:38px;float:left;margin-left:100px;}
            .rightFloat{float:right;}
        </style>
    </head>
    <body>
        <header>
           <span id="title">我的博客</span><span class="rightFloat">登录&nbsp;|&nbsp;<a href="reg.html">注册</a></span>
        </header>
        <nav>
            <a href="#">首页</a>&nbsp;|&nbsp;<a href="#">博客列表</a>&nbsp;|&nbsp;<a href="#">编辑博客</a>&nbsp;|&nbsp;<a href="formtag.html">表单元素</a>
        </nav>
        <article>
            <header>出塞赏析</header>
            <header>2019-09-21</header>
            <hr>
            <p>出塞</p>
            <p>王昌龄【唐】</p>
            <p>秦时明月汉时关</p>
            <p>万里长征人未还</p>
            <p>但使龙城飞将在</p>
            <p>不教胡马度阴山</p>
            <p>诗从写景入手。首句“秦时明月汉时关”七个字，即展现出一幅壮阔的图画：一轮明月，照耀着边疆关塞。诗人只用大笔勾勒，不作细致描绘，却恰好显示了边疆的寥廓和景物的萧条，渲染出孤寂、苍凉的气氛。尤为奇妙的是，诗人在“月”和“关”的前面，用“秦汉时”三字加以修饰，使这幅月临关塞图，变成了时间中的图画，给万里边关赋予了悠久的历史感。这是诗人对长期的边塞战争作了深刻思考而产生的“神来之笔”。</p>
            <p>面对这样的景象，边人触景生情，自然联想起秦汉以来无数献身边疆、至死未归的人们。“万里长征人未还”，又从空间角度点明边塞的遥远。这里的“人”，既是指已经战死的士卒，也指还在戍守不能回归的士卒。“人未还”，一是说明边防不巩固，二是对士卒表示同情。这本是一个问题的两个方面，前者是因，后者是果。这是从秦到汉乃至于唐代，都没有解决的大问题。于是在第三、四两句，诗人给出了回答。</p>
            
            <section>
                <h3>评论</h3>
                <article>
                    <h4>好诗</h4>
                    <p>好诗值得多读</p>
                </article>
                <article>
                    <h4>热血沸腾</h4>
                    <p>龙城有飞将！</p>
                </article>
            </section>
        </article>
        <footer>
            copyright&copy;2018-2019佛山职业技术学院
        </footer>
    </body>
</html>